<script setup lang="ts">
import Taro, { useLoad } from '@tarojs/taro';
import { useTagStore } from '@/store/modules/tag';
import clone from '@/lib/clone';
const tagStore = useTagStore();
const record = ref({
  id: 0,
  tag: { name: 'food', value: '餐饮' },
  type: '0',
  note: '',
  amount: '0',
  createAt: new Date()
});
const show = ref(false);
const currentDate = ref(new Date());
const recordType = record.value.type === '0' ? '支出' : '收入';
useLoad(opt => {
  tagStore.findRecord(parseInt(opt.id));
  record.value = clone(tagStore.currentRecord);
});
function deleteRecord() {
  tagStore.removeRecord(record.value.id);
  if (tagStore.recordListError === 'notfound') {
    Taro.showToast({
      title: '该记录不存在',
      icon: 'error'
    });
  } else {
    Taro.navigateBack();
  }
}
function editComplete() {
  if (Number(record.value.amount) > 0) {
    tagStore.updateRecord({ id: record.value.id, record: record.value });

    Taro.navigateBack();
  } else {
    Taro.showToast({
      title: '金额不能低于0',
      icon: 'error'
    });
  }
}
const showTime = computed(() => String(record.value.createAt).split('T')[0]);

const confirm = ({ selectedValue, selectedOptions }) => {
  show.value = false;
  record.value.createAt = `${selectedOptions.map((val: any) => val.value).join('-')}T${
    String(record.value.createAt).split('T')[1]
  }`;
};
</script>

<template>
  <basic-layout show-tab-bar>
    <custom-nav-bar title="具体信息" />
    <nut-row type="flex" justify="space-between" class="pt-2">
      <nut-col :span="4" @tap="Taro.navigateBack()">
        <IconFont
          name="rect-left"
          style="height: var(--nut-button-default-height, 76rpx); width: var(--nut-button-default-height, 76rpx)"
        ></IconFont>
      </nut-col>
      <nut-col :span="10">
        <text
          style="height: var(--nut-button-default-height, 76rpx); line-height: var(--nut-button-default-height, 76rpx)"
        >
          编辑账目
        </text>
      </nut-col>
      <nut-col :span="2"></nut-col>

      <nut-col :span="8">
        <nut-button type="primary" @tap="editComplete">
          <template #icon>
            <IconFont name="checklist"></IconFont>
          </template>
          编辑完成
        </nut-button>
      </nut-col>
    </nut-row>
    <nut-form>
      <div class="w-200 mxa text-center">
        <tagItem :tag-item="record.tag"></tagItem>
      </div>
      <nut-form-item label="类型">
        <nut-input v-model="recordType" readonly type="text" />
      </nut-form-item>
      <nut-form-item label="金额">
        <nut-input v-model="record.amount" type="text" />
      </nut-form-item>
      <nut-form-item label="备注">
        <nut-input v-model="record.note" type="text" />
      </nut-form-item>
      <nut-cell title="日期" :desc="showTime" @tap="show = true"></nut-cell>
      <nut-popup v-model:visible="show" position="bottom">
        <nut-date-picker
          v-model="currentDate"
          :min-date="new Date(2015, 0, 1)"
          :max-date="new Date()"
          :is-show-chinese="true"
          @confirm="confirm"
        ></nut-date-picker>
      </nut-popup>
    </nut-form>
    <div class="flex-center">
      <nut-button type="warning" @tap="deleteRecord">
        <template #icon>
          <IconFont name="del"></IconFont>
        </template>
        删除账目
      </nut-button>
    </div>
  </basic-layout>
</template>
